// 哪个大盒子  
// 大盒子中的按钮 

// 大盒子中的内容小盒子

// 方法  : 给按钮绑定点击事件 
//   按钮高亮 取消高亮 
//   盒子 显示  隐藏 


// function Tab(ele,type){
//     // 哪个大盒子 
//     this.ele = document.querySelector(ele);
//     // 哪些按钮
//     this.btns = this.ele.querySelectorAll('ul > li');

//     // 哪些内容盒子
//     this.boxes = this.ele.querySelectorAll('ol > li');
//     this.type = type || ''; // 如果你传了事件类型 就赋值 否则 赋值空字符串
//     this.init(); // 实例化对象 自动调用方法
// }

// // 从Tab实例化的对象的__proto__ 都指向  Tab.prototype

// Tab.prototype.init = function(){
//     // 给每个按钮绑定点击事件 
//     for(let i=0;i<this.btns.length;i++){
//         // 如果你传了 就绑定 你传的事件  否则 绑定 click
//         this.btns[i].addEventListener(this.type || 'click',()=>{

//             for(let j=0;j<this.btns.length;j++){
//                 this.btns[j].classList.remove('active');
//                 this.boxes[j].classList.remove('active');
//             }

//             this.btns[i].classList.add('active');
//             this.boxes[i].classList.add('active');

//         });
//     }
// }

function Tab(ele, option) {
    // 哪个大盒子 
    this.ele = document.querySelector(ele);
    // 哪些按钮
    this.btns = this.ele.querySelectorAll('ul > li');

    // 哪些内容盒子
    this.boxes = this.ele.querySelectorAll('ol > li');
    this.option = option || {}; // 如果你传了事件类型 就赋值 否则 赋值空字符串
    // this.option是个对象 
    this.init(); // 实例化对象 自动调用方法
}

// 从Tab实例化的对象的__proto__ 都指向  Tab.prototype

Tab.prototype.init = function () {
    // 给每个按钮绑定点击事件 
    for (let i = 0; i < this.btns.length; i++) {
        // 如果你传了 就绑定 你传的事件  否则 绑定 click
        this.btns[i].addEventListener(this.option.type || 'click', () => {

            for (let j = 0; j < this.btns.length; j++) {
                this.btns[j].classList.remove('active');
                this.boxes[j].classList.remove('active');
            }

            this.btns[i].classList.add('active');
            this.boxes[i].classList.add('active');

        });
    }
}